﻿<%@ Import Namespace="Revis.VClinicNet.UI.Internal.Mvc.Models" %>
<%@ Import Namespace="Revis.VClinicNet.Util.Extensions" %>

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Classic.Master" Inherits="ModelViewPage<VisitCreateFormModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Nowa wizyta</h2>
    <% Html.BeginForm(); %>
    <fieldset class="form">
        <%=Html.IfValidationFail() %>  
        
        <h3>
            Wyszukiwanie pacjenta:
        </h3>
        <div>
            <label for="patient_search_value">
                Kryterium:</label>
            <input type="text" id="patient_search_value" />
            <select id="patient_search_field">
                <option value="Personal.Surname">Nazwisko</option>
                <option value="Personal.Pesel">Pesel</option>
            </select>
            <input type="button" id="patient_search_button" value="Szukaj" onclick="javascript:GetPatientSearchResult();" />
        </div>
        <h4>
            Wyniki wyszukiwania pacjentów:
        </h4>
        <div class="json_search">
            <table class="grid" id="patient_search_result">
            </table>
        </div> 
        <h3>
            Wybrany pacjent:
        </h3>       
        <div>
            <%=this.TextBox(v=>v.PatientName).Label("Pacjent:").Id("PatientName") %>
            <%=this.Hidden(v => v.PatientId).Id("PatientId") %>
        </div>
        <h3>
            Termin wizyty:
        </h3>
        <div>
            <%=this.Select("DoctorId").Options(Model.Doctors).Label("Lekarz:") %>
        </div>
        <div>
            <%=this.TextBox(v=>v.DateAsString).Label("Data wizyty:") %>
            <input type="button" id="visit_search_button" value="Sprawdź wizyty" onclick="javascipt:GetDoctorVisitsResult();" />
            <%=this.ValidationMessage(w=>w.DateAsString) %>
        </div>
        <div>
            <%=this.TextBox(w => w.Hour).MaxLength(2).Size(2).Label("Godzina:").Value(Model.Date.Hour)%>
            :
            <%=this.TextBox(w => w.Minute).MaxLength(2).Size(2).Value(Model.Date.Minute)%>
            <%=this.ValidationMessage(w=>w.Hour) %>
            <%=this.ValidationMessage(w=>w.Minute) %>
        </div>
        <h4>
            Zarezerwowane terminy lekarza:
        </h4>
        <div>
            <label for="working_hours">
                Godziny pracy:</label><span id="working_hours">00:00-00:00</span>
        </div>
        <div>
            <label for="doctor_room">
                Pokój:</label><span id="doctor_room">brak</span>
        </div>
        <div class="form-buttons">
            <%=this.SubmitButton("Ok") %>
            <%=this.ResetButton("Reset") %>
        </div>        
        <div class="json_search">
            <table class="grid" id="doctor_visits_result">
            </table>
        </div>
    </fieldset>
    <% Html.EndForm(); %>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
    <link rel="stylesheet" type="text/css" href="../../Content/ui/base/ui.core.css" />
    <link rel="stylesheet" type="text/css" href="../../Content/ui/base/ui.theme.css" />
    <link rel="stylesheet" type="text/css" href="../../Content/ui/base/ui.datepicker.css" />
    <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="../../Scripts/ui.core.js"></script>
    <script type="text/javascript" src="../../Scripts/ui.datepicker.js"></script>
    <script type="text/javascript" src="../../Scripts/ui.datepicker-pl.js"></script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript">

        function UpdatePatientResultTableAnimated(data) {
            var resultTable = $("table#patient_search_result");
            resultTable.fadeOut("slow", function () {
                UpdatePatientResultTable(data);
                resultTable.fadeIn("slow");
            });
        }

        function UpdateDoctorVisitsResultTableAnimated(data) {
            var resultTable = $("table#doctor_visits_result");
            resultTable.fadeOut("slow", function () {
                UpdateDoctorVisitsResult(data);
                resultTable.fadeIn("slow");
            });
        }

        function UpdatePatientResultTable(data) {
            var resultTable = $("table#patient_search_result");
            resultTable.empty();
            resultTable.append($("<thead>").html("<tr><th>Wybierz</th><th>Imię i nazwisko</th><th>Pesel</th><th>Adres</th></tr>"));
            var result = $("<tbody>");
            var hasElements = false;
            $.each(data, function (index, d) {
                hasElements = true;
                var line = $("<tr>").attr("class", index % 2 == 0 ? "gridrow" : "gridrow_alternate");
                var element = $("<td>").attr("class", "center");
                var patientId = "patient_name_"+d.Id;
                var patientName = $("<span>").html(d.Name).attr("id", patientId);
                line.append(element.clone().append($("<input>").attr({
                    type: "radio", name: "patient_search_id", value: d.Id
                })));                
                line.append(element.clone().html(patientName));
                line.append(element.clone().html(d.Pesel));
                line.append(element.clone().html(d.Address));
                result.append(line);
            });
            if (hasElements == false) {
                result.append("<tr class=\"gridrow\"><td colspan=\"4\" class=\"center\">Nie znaleziono pacjentów</td></tr>");
            }
            resultTable.append(result);
            $("input[name='patient_search_id']").change(UpdateSelectedPatientInfo);
        }

        function UpdateDoctorVisitsResult(data) {
            //załadowanie danych o wizytach
            var resultTable = $("table#doctor_visits_result");
            resultTable.empty();
            resultTable.append($("<thead>").html("<tr><th>Godzina</th><th>Pacjent</th><th>Akcja</th></tr>"));
            var result = $("<tbody>");
            var hasElements = false;
            $.each(data.Visits, function (index, v) {
                hasElements = true;
                var line = $("<tr>").attr("class", index % 2 == 0 ? "gridrow" : "gridrow_alternate");
                var element = $("<td>").attr("class", "center");
                var linkUrl = "/Visit/Detail/" + v.Id;
                var link = $("<a>").attr("href", linkUrl).html("Idź do");                
                line.append(element.clone().html(v.Date));
                line.append(element.clone().html(v.PatientName));
                line.append(element.clone().html(link));
                result.append(line);
            });
            if (hasElements == false) {
                result.append("<tr class=\"gridrow\"><td colspan=\"3\" class=\"center\">Brak wizyt</td></tr>");
            }
            resultTable.append(result);
            //załadowanie danych o pokoju i godzinach pracy
            var workingTimes =
            $("span#working_hours").empty().html(data.WorkTime.BeginInfo + "-" + data.WorkTime.EndInfo);
            $("span#doctor_room").empty().html(data.WorkTime.Room);
            $("input[name='patient_search_id']").change(UpdateSelectedPatientInfo);
        }
      

        function GetPatientSearchResult() {
            var url = "/Patient/JsonSearch/";
            var json = {
                field: $("select#patient_search_field").val(),
                value: $("input#patient_search_value").val()
            };
            $.ajax({
                url: url,
                type: "POST",
                success: UpdatePatientResultTableAnimated,
                data: json
            });
        }

        function GetDoctorVisitsResult() {
            var url = "/Doctor/JsonWorkInfo/";
            var json = {
                id: $("select#DoctorId option:selected").val(),
                date: $("input#DateAsString").val()
            };
            $.ajax({
                url: url,
                type: "POST",
                success: UpdateDoctorVisitsResultTableAnimated,
                data: json
            });
        }

        $(document).ready(function () {
            //load datapicker
            $("#DateAsString").datepicker({
                dateFormat: "yy-mm-dd",
            });
            $.datepicker.setDefaults($.datepicker.regional['pl']);                       
        });
        
        function UpdateSelectedPatientInfo() {
            var patientId = $("input[name='patient_search_id']:checked").val();
            var patientIdNameSelector = "span#patient_name_"+patientId;
            var patientName = $(patientIdNameSelector).html();
            $("input#PatientId").val(patientId);  
            $("input#PatientName").val(patientName);
        }      

    </script>
</asp:Content>
